﻿@{
    ViewBag.Title = "首页";
    Layout = "~/Views/Shared/ListLayout.cshtml";
    //Layout = null;
}
<!--layout-->
<div id="cc" class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'west',split:true,title:'节点模板'" style="width: 222px;">
        <div class="node-template" style="position: absolute; width: 140px; min-height: 140px; border: 3px solid black; padding: 10px;">
            <strong>标准节点</strong>
        </div>
    </div>
    <div data-options="region:'center',
                        border:true,
                        tools: [{
                                iconCls:'icon-save',
                                handler:save
                            },{
                                iconCls:'icon-remove',
                                handler:function(){alert('remove')}
                            }],
                        title:'节点配置'">
        @*<div id="main">*@
            <div class="demo statemachine-demo" id="statemachine-demo">
                <div class="w" id="start">开始<div class="ep"></div></div>
                <div class="w" id="end">结束<div class="ep"></div></div>
            </div>
        @*</div>*@
    </div>
</div>
<!--/layout-->
<!--dialog-->
<div id="dlgAdd" class="easyui-dialog" title="添加用户" style="width:480px;height:300px;padding:10px"
     data-options="
                closed:true,
                iconCls: 'icon-save',
                toolbar: [{
                    text:'重置',
                    iconCls:'icon-reload',
                    handler:function(){
                        alert('add')
                    }
                },{
                    text:'保存',
                    iconCls:'icon-save',
                    handler:function(){
                        alert('save')
                    }
                },'-',{
                    text:'连续保存',
                    iconCls:'icon-save',
                    handler:function(){
                        alert('save')
                    }
                }]
            ">
    <form id="fm" class="easyui-form" method="post">
        <table cellpadding="1" cellspacing="2">
            <tr>
                <th>
                    登录账号：
                </th>
                <td>
                    <input type="text" id="UserName" name="UserName" class="easyui-validatebox" data-options="required:true" />
                </td>
                <th>
                    密码：
                </th>
                <td>
                    <input type="text" id="Password" name="Password" class="easyui-validatebox" data-options="required:true,validType:'length[1,20]',tipPosition:'bottom'" />
                </td>
            </tr>
            <tr>
                <th>
                    姓名：
                </th>
                <td>
                    <input type="text" id="FullName" name="FullName" class="easyui-validatebox" data-options="validType:'length[1,10]'" />
                </td>
                <th>
                    性别：
                </th>
                <td>
                    <select id="Gender" class="easyui-combobox" data-options="required:true" style="width:150px">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>
                    出生日期：
                </th>
                <td>
                    <input class="easyui-datebox" id="Birthday" />
                </td>
                <th>
                    组织：
                </th>
                <td>
                    @*<select id="OrganizationId" name="OrganizationId" class="easyui-combotree" style="width:150px" data-options="url:'@Url.Action("GetAllOrganizationsForTree","Organization")',parentField: 'ParentId'"></select>*@
                </td>
            </tr>
        </table>
        <input type="hidden" id="Id" name="Id" />
    </form>
</div>
<!--/dialog-->
@section style{
    <link href="~/Scripts/jquery-jsPlumb/demo/demo-all.css" rel="stylesheet" />
    <link href="~/Scripts/jquery-jsPlumb/demo/statemachine/demo.css" rel="stylesheet" />
}
@section Script{
    <!-- DEP -->
@*<script src="~/Scripts/jquery-easyui/jquery.easyui.min.custom.js"></script>*@
    @*<script src="~/Scripts/jquery-jsPlumb/lib/jquery-ui-1.9.2-min.js"></script>*@
<script src="~/Scripts/jquery-jsPlumb/lib/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="~/Scripts/jquery-jsPlumb/lib/jquery.ui.touch-punch.min.js"></script>
    <!-- /DEP -->
    <!-- JS -->
    <!-- support lib for bezier stuff -->
    <script src="~/Scripts/jquery-jsPlumb/lib/jsBezier-0.6.js"></script>
    <!-- jsplumb geom functions -->
    <script src="~/Scripts/jquery-jsPlumb/lib/jsplumb-geom-0.1.js"></script>
    <!-- jsplumb util -->
    <script src="~/Scripts/jquery-jsPlumb/src/util.js"></script>
    <!-- base DOM adapter -->
    <script src="~/Scripts/jquery-jsPlumb/src/dom-adapter.js"></script>
    <!-- main jsplumb engine -->
    <script src="~/Scripts/jquery-jsPlumb/src/jsPlumb.js"></script>
    <!-- endpoint -->
    <script src="~/Scripts/jquery-jsPlumb/src/endpoint.js"></script>
    <!-- connection -->
    <script src="~/Scripts/jquery-jsPlumb/src/connection.js"></script>
    <!-- anchors -->
    <script src="~/Scripts/jquery-jsPlumb/src/anchors.js"></script>
    <!-- connectors, endpoint and overlays  -->
    <script src="~/Scripts/jquery-jsPlumb/src/defaults.js"></script>
    <!-- bezier connectors -->
    <script src="~/Scripts/jquery-jsPlumb/src/connectors-bezier.js"></script>
    <!-- state machine connectors -->
    <script src="~/Scripts/jquery-jsPlumb/src/connectors-statemachine.js"></script>
    <!-- flowchart connectors -->
    <script src="~/Scripts/jquery-jsPlumb/src/connectors-flowchart.js"></script>
    <script src="~/Scripts/jquery-jsPlumb/src/connector-editors.js"></script>
    <!-- SVG renderer -->
    <script src="~/Scripts/jquery-jsPlumb/src/renderers-svg.js"></script>
    <!-- canvas renderer -->
    <script src="~/Scripts/jquery-jsPlumb/src/renderers-canvas.js"></script>
    <!-- vml renderer -->
    <script src="~/Scripts/jquery-jsPlumb/src/renderers-vml.js"></script>
    <!-- jquery jsPlumb adapter -->
    <script src="~/Scripts/jquery-jsPlumb/src/jquery.jsPlumb.js"></script>
    <!-- /JS -->

    <script>
        var connections = [];
        var nodes = ['start', 'end'];
        $(function () {
            var updateConnections = function (conn, remove) {
                if (!remove) connections.push(conn);
                else {
                    var idx = -1;
                    for (var i = 0; i < connections.length; i++) {
                        if (connections[i] == conn) {
                            idx = i; break;
                        }
                    }
                    if (idx != -1) connections.splice(idx, 1);
                }
            };

            jsPlumb.ready(function () {
                /*开始jsPlumb初始化*/
                var paramsSource = {
                    filter: ".ep",
                    anchor: "Continuous",
                    connector: ["StateMachine", { curviness: 20 }],
                    connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },
                    maxConnections: 5,
                    onMaxConnections: function (info, e) {
                        alert("Maximum connections (" + info.maxConnections + ") reached");
                    }
                };
                var paramsTarget = {
                    dropOptions: { hoverClass: "dragHover" },
                    anchor: "Continuous"
                };
                var instance = jsPlumb.getInstance({
                    Endpoint: ["Dot", { radius: 2 }],
                    HoverPaintStyle: { strokeStyle: "#1e8151", lineWidth: 2 },
                    ConnectionOverlays: [
                        ["Arrow", {
                            location: 1,
                            id: "arrow",
                            length: 14,
                            foldback: 0.8
                        }]
                    ],
                    Container: "statemachine-demo"
                });
                var windows = jsPlumb.getSelector(".statemachine-demo .w");
                instance.draggable(windows);
                instance.bind("click", function (c) {
                    instance.detach(c);
                });
                instance.bind("connection", function (info, originalEvent) {
                    updateConnections(info.connection);
                });
                instance.bind("connectionDetached", function (info, originalEvent) {
                    updateConnections(info.connection, true);
                });
                instance.doWhileSuspended(function () {
                    instance.makeSource(windows, paramsSource);
                    instance.makeTarget(windows, paramsTarget);
                });
                /*结束jsPlumb初始化*/

                $("#statemachine-demo").droppable({
                    drop: function (event, ui) {
                        if ($(ui.draggable[0]).hasClass("node-template")) {
                            var url = '@Url.Action("GetGuid", "Common", new { area=""})';
                            $.get(url, function (data) {
                                var containerOffset = $('#statemachine-demo').offset();
                                var id = data;
                                var top = ui.offset.top - containerOffset.top;
                                var left = ui.offset.left - containerOffset.left;
                                $('#statemachine-demo').append('<div class="w" id="' + id + '" style="top:' + top + 'px;left:' + left + 'px" id="phone1">未定义<div class="ep"></div></div>');
                                var node = jsPlumb.getSelector("#" + id);
                                instance.makeSource(node, paramsSource);
                                instance.makeTarget(node, paramsTarget);
                                instance.draggable(node);
                                nodes.push(id);
                            })
                        }
                    }
                });
            });

            $(".node-template").draggable({
                zIndex: 9999,
                helper: "clone"
            });
        });

        function save() {

            $('#dlgAdd').dialog('open');
            //console.log(connections);
            //console.log(nodes);
            //alert(connections.length);
        }




    </script>
}
